<template>
  <div class="login">
    <div class="login-header">
      <img src="@/assets/images/logo.png" alt="logo" class="logo-img" />
    </div>

    <div class="login-main">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <h3 class="title">你好，欢迎使用</h3>
        
        <div class="form-content-group">
          <el-form-item prop="username" class="no-margin-item">
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="请输入账号"
              class="custom-input"
            >
              <img slot="prefix" src="@/assets/images/sign_admin.png" class="input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password" class="no-margin-item">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="请输入密码"
              class="custom-input"
              @keyup.enter.native="handleLogin"
            >
              <img slot="prefix" src="@/assets/images/sign_password.png" class="input-icon" />
            </el-input>
          </el-form-item>
          <!-- 保持原结构不变 -->
          <el-form-item prop="agreeTerms" class="no-margin-item agree-terms-item">
            <el-checkbox v-model="loginForm.agreeTerms" size="mini">
              我已阅读并同意用户协议和隐私政策
            </el-checkbox>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button
            class="custom-login-btn"
            size="medium"
            style="width: 100%"
            :loading="loading"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登录</span>
            <span v-else>登录中...</span>
          </el-button>
        </el-form-item>
      </el-form>

      <div class="qr-code-container">
        <div class="qr-code-panel">
          <div class="qr-code-box">
            <img src="@/assets/images/weixin.png" alt="扫码登录" class="qr-code-img" />
            <div class="qr-tip-wrapper">
              <img src="@/assets/images/wxlogo.png" alt="微信logo" class="wx-logo" />
              <p class="qr-code-tip">微信扫码登录</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="login-footer">
      <span>使用协议</span>
      <span>隐私条款</span>
      <span>公安备案12137529043</span>
      <span>ICP备案12137529033</span>
      <span>关于我们</span>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie"
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        agreeTerms: false, // 初始未勾选
        rememberMe: false
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        agreeTerms: [
          // 修复1：添加自定义校验函数，明确判断是否勾选
          { 
            required: true, 
            trigger: ["change", "blur", "submit"], // 修复2：补充submit触发，确保登录时校验
            validator: (rule, value, callback) => {
              if (value) {
                callback(); // 勾选了，校验通过
              } else {
                callback(new Error("请同意用户协议和隐私政策")); // 未勾选，抛出错误
              }
            }
          },
        ],
      },
      loading: false,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getCookie()
  },
  methods: {
    getCookie() {
      const username = Cookies.get("username")
      const password = Cookies.get("password")
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        ...this.loginForm,
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    handleLogin() {
      // 修复3：主动触发表单校验（确保所有字段都校验，包括agreeTerms）
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 })
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
          } else {
            Cookies.remove("username")
            Cookies.remove("password")
            Cookies.remove('rememberMe')
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #EEF4FA;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

.login-header {
  position: absolute;
  top: 20px;
  left: 20px;
  .logo-img {
    width: 140px;
    height: 35px;
  }
}

.login-main {
  width: 600px;
  height: 350px;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  overflow: hidden;
  padding: 9px;
}

.login-form {
  width: 350px;
  padding: 15px 25px;
  .title {
    font-weight: bold;
    font-size: 16px;
    color: #0C1124;
    text-align: center;
    margin: 30px 0 20px 0;
  }

  .form-content-group {
    display: flex;
    gap: 17px;
    flex-direction: column;
    margin-bottom: 15px;
  }

  .no-margin-item {
    margin: 0 !important;
  }

  ::v-deep .custom-input {
    background-color: #EEF4FA !important;
    border: none !important;
    border-radius: 4px !important;
    height: 36px;
    &:hover,
    &:focus,
    &.focus {
      background-color: #EEF4FA !important;
      border: none !important;
      box-shadow: none !important;
    }
    input {
      height: 36px;
      padding-left: 38px;
      background-color: #EEF4FA !important;
      border: none !important;
      color: #0C1124 !important;
      placeholder {
        color: #999 !important;
      }
    }
  }

  .input-icon {
    width: 16px;
    height: 16px;
    margin-top: 10px;
    margin-left: 3px;
  }

  ::v-deep .el-checkbox {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    /* 修复4：确保复选框可点击，无遮挡 */
    pointer-events: auto !important;
  }

  ::v-deep .el-checkbox__label {
    display: inline-block !important;
    padding-left: 10px !important;
    line-height: 1 !important;
    font-size: 11px !important;
    color: #0C1124 !important;
    /* 修复5：标签可点击，关联复选框 */
    cursor: pointer !important;
  }

  ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #0C1124 !important;
  }

  ::v-deep .agree-terms-item .el-form-item__error {
    color: red !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 10 !important;
    width: auto !important;
  }

  .custom-login-btn {
    background-color: #0C1124;
    border-color: #0C1124;
    color: #fff;
    margin-top: 35px;
    &:hover {
      background-color: #1a2138;
      border-color: #1a2138;
    }
  }
}

.qr-code-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-code-panel {
  width: 100%;
  background-color: #EEF4FA;
  border-radius: 6px;
  padding: 75px 0;
  .qr-code-box {
    text-align: center;
  }
  .qr-code-img {
    width: 150px;
    height: 150px;
    margin-bottom: 8px;
  }
  .qr-tip-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wx-logo {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
  .qr-code-tip {
    font-size: 12px;
    color: #666;
    margin: 0;
  }
}

.login-footer {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #0C1124;
  span {
    margin: 0 8px;
    cursor: pointer;
  }
}
</style>